<template>
  <div class="searchColor">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入小区或地址"
        @search="onSearch"
        @cancel="onCancel"
        background="#f5f5f9"
      />
    </form>
    <ul>
      <li
        v-show="flag"
        @click="gotBackRent(item.communityName)"
        v-for="item in info"
        :key="item.communityName"
      >
        {{ item.communityName }}
      </li>
    </ul>
  </div>
</template>

<script>
import { communityKey } from '@/api/area'
import { mapState } from 'vuex'
export default {
  name: 'rentSearch',
  data () {
    return {
      flag: false,
      value: '',
      info: ''
    }
  },
  methods: {
    async onSearch () {
      console.log(this.cityId)
      const data = await communityKey({ name: this.value, id: this.cityId })
      console.log(data)
      this.info = data.body
      this.flag = true
    },
    onCancel () {
      this.$router.push('/rent')
    },
    gotBackRent (names) {
      this.$router.push({
        path: '/rent',
        query: {
          value: names
        }
      })
    }
  },
  computed: {
    ...mapState('user', ['cityName', 'cityId'])
  }
}
</script>

<style scoped lang="less">
.searchColor {
  width: 100%;
  height: 44px;
  //   background-color: #f5f5f9;
  color: #333;
  font-size: 14px;
  ul {
    li {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #f1f1f1;
      margin: 0 10px;
    }
  }
}
</style>
